<template>
    <div class="containbox">
        <!-- 头部 -->
        <mt-header title="特色礼品">
            <router-link to="/index" class="mui-icon mui-icon-arrowleft" slot="left">
            </router-link>
            <a class="mui-icon mui-icon-bars" slot="right" @click="isShow=!isShow"></a>
        </mt-header>
        <!-- 右侧more按钮的列表 -->
        <sort v-if="isShow"></sort>
        <!-- 导航栏 -->
        <div class="nav">
            <div class="hot">
                热门：
                <a href="javascript:;"><span>T400首饰</span></a>
                <a href="javascript:;"><span>创意礼品</span></a>
                <a href="javascript:;"><span>巧罗巧克力</span></a>
            </div>
            <div class="giftList">
                <router-link to="/giftscate">礼品分类 ></router-link>
            </div>
        </div>
        <!-- 商品列表 -->
        <div class="goods">
            <div class="title">热销礼品</div>
            <div class="mui-content" style="background-color:#fff">   
                <transition-group appear tag="ul" class="mui-table-view mui-grid-view">
                    <li v-for="(item) in giftsRec" :key="item.goodsId" class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="/#/commodity">
                            <img class="mui-media-object" :src="item.img">
                            <div class="mui-media-body">
                                <p class="goods-title">{{item.title}}</p>
                                <p class="goods-detail">{{item.detail}}</p>
                                <p class="goods-price">{{item.price}}</p>
                            </div>
                        </a>
                    </li>
                </transition-group>
            </div>
            <!-- 销量降序 -->
            <div class="title">创意礼物-金箔花</div>
            <div class="mui-content" style="background-color:#fff">   
                <transition-group appear tag="ul" class="mui-table-view mui-grid-view">
                    <li v-for="(item) in giftsFlo" :key="item.goodsId" class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="/#/commodity">
                            <img class="mui-media-object" :src="item.img">
                            <div class="mui-media-body">
                                <p class="goods-title">{{item.title}}</p>
                                <p class="goods-detail">{{item.detail}}</p>
                                <p class="goods-price">{{item.price}}</p>
                            </div>
                        </a>
                    </li>
                </transition-group>
            </div>
            <!-- 价格降序 -->
            <div class="title">创意礼物-精品音乐盒</div>
            <div class="mui-content" style="background-color:#fff">   
                <transition-group appear tag="ul" class="mui-table-view mui-grid-view">
                    <li v-for="(item) in giftsMus" :key="item.goodsId" class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="/#/commodity">
                            <img class="mui-media-object" :src="item.img">
                            <div class="mui-media-body">
                                <p class="goods-title">{{item.title}}</p>
                                <p class="goods-detail">{{item.detail}}</p>
                                <p class="goods-price">{{item.price}}</p>
                            </div>
                        </a>
                    </li>
                </transition-group>
            </div>
            
        </div>


    </div>
</template>
<script>
import Vue from "vue";

// 导入底部导航栏组件
import sort from "./navsort.vue";
import giftsRecData from "./data/gifts.json";
import giftsFloData from "./data/giftsflower.json";
import giftsMusData from "./data/giftsmusic.json";
export default {
  data() {
    return {
      isShow: false,
      giftsRec: giftsRecData,
      giftsFlo: giftsFloData,
      giftsMus: giftsMusData
    };
  },
  methods: {},
  components: {
    sort
  }
};
</script>
<style lang="less" scoped>
a {
    text-decoration: none;
    color: #666;
}
// 头部
.mint-header {
  height: 44px;
  color: #666;
  background-color: rgba(250, 250, 250, 0.9);
  border-bottom: 1px solid #e4e4e4;
}
// 导航栏
.nav {
    background-color: #fff;
    line-height: 40px;
    color: #666;
    font-size: 14px;
    padding: 0 10px;
    border-bottom: 1px solid #E4E4E4;
    .hot {
        width: 75%;
        float: left;
    }
    .giftList {
        float: right;
        a {
            color: red;
        }
    }
}

// 商品列表
.goods {
    background-color: #f4f4f4;
    .title {
        line-height: 40px;
        font-size: 14px;
        padding-left: 10px;
        color: red;
    }
}
.mui-content > .mui-table-view {
  &:first-child {
    margin-top: 0;
  }
  &.mui-grid-view {
    .mui-table-view-cell {
      padding: 0;
      > a:not(.mui-btn) {
        margin: 10px 0 0 14px;
        border: 1px solid #ccc;
        padding: 5px;
      }
      .mui-media-body {
        height: auto;
        p {
          font-size: 12px;
          color: #232323;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          text-align: left;
          &.goods-detail {
            color: #777;
          }
        }
      }
    }
  }
}
</style>